<template>
  <div>
    <div ref="table" style="position: absolute; width: 600px;height:400px;left:20px;top:20px;"></div>
  </div>
</template>

<script>
import * as VTable from '@visactor/vtable';
import { VTableSheet, TYPES  } from '@visactor/vtable-sheet';
export default {
  name: '',
  props: [],
  components: {},
  data() {
    return {
     tableInstance: null,
    };
  },
  created() {},
  mounted() {
    this.createTable()
  },
  methods: {
    createTable() {
      const container = this.$refs.table;
      this.tableInstance = new VTableSheet(container, {
        sheets: [
          // 销售数据表格页
          {
            sheetKey: "sales",
            sheetTitle: "销售数据",
            columns: [
              { title: "产品", width: 120 },
              { title: "一季度", width: 100 },
              { title: "二季度", width: 100 },
              { title: "三季度", width: 100 },
              { title: "四季度", width: 100 },
              { title: "总计", width: 100 },
            ],
            data: [
              ["笔记本电脑", 1200, 1500, 1800, 2000, 6500],
              ["智能手机", 2500, 2800, 3000, 3500, 11800],
              ["平板电脑", 900, 950, 1100, 1300, 4250],
              ["智能手表", 500, 650, 800, 950, 2900],
            ],
            active: true,
            theme: {
              tableTheme: TYPES.VTableThemes.ARCO.extends({
                bodyStyle: {
                  color: "red",
                },
              }),
            },
            frozenRowCount: 1,
            frozenColCount: 1,
          },

          // 库存数据表格页
          {
            sheetKey: "inventory",
            sheetTitle: "库存数据",
            columns: [
              { title: "产品", width: 120 },
              { title: "库存数量", width: 100 },
              { title: "安全库存", width: 100 },
              { title: "补货点", width: 100 },
              { title: "库存状态", width: 100 },
            ],
            data: [
              ["笔记本电脑", 150, 50, 75, "正常"],
              ["智能手机", 320, 100, 150, "充足"],
              ["平板电脑", 80, 40, 60, "警告"],
              ["智能手表", 35, 30, 45, "不足"],
            ],
          },

          // 员工数据表格页
          {
            sheetKey: "employees",
            sheetTitle: "员工数据",
            columns: [
              { title: "姓名", width: 100 },
              { title: "部门", width: 120 },
              { title: "职位", width: 120 },
              { title: "入职日期", width: 120 },
              { title: "工资", width: 100 },
            ],
            data: [
              ["张三", "技术部", "工程师", "2022-01-15", 12000],
              ["李四", "市场部", "经理", "2020-06-20", 18000],
              ["王五", "技术部", "高级工程师", "2021-03-10", 15000],
              ["赵六", "人力资源", "专员", "2022-09-01", 9000],
            ],
            theme: {
              tableTheme: TYPES.VTableThemes.BRIGHT,
            },
          },
        ],
        theme: {
          // 行序号单元格样式
          rowSeriesNumberCellStyle: {
            bgColor: "#f0f0f0",
            color: "#666666",
            fontSize: 12,
            textAlign: "center",
          },

          // 列序号单元格样式
          colSeriesNumberCellStyle: {
            bgColor: "#f0f0f0",
            color: "#666666",
            fontSize: 12,
            textAlign: "center",
          },

          // 菜单样式
          menuStyle: {
            fontFamily: "Microsoft YaHei",
            fontSize: 13,
            color: "#333333",
            padding: [10, 15, 10, 15],
            bgColor: "#ffffff",
          },

          // 表格主题
          tableTheme: {
            bgColor: "#ffffff",
            color: "#333333",
            fontFamily: "Microsoft YaHei",
            fontSize: 13,

            // 表头样式
            headerStyle: {
              bgColor: "#e6f7ff",
              color: "#0066cc",
              fontSize: 14,
              fontWeight: "bold",
            },

            // 边框样式
            borderLineWidth: 1,
            borderColor: "#d9d9d9",

            // 行交替颜色
            underlayBackgroundColor: "transparent",
            stripeRowBackgroundColor: "#fafafa",

            // 选中单元格样式
            selectionStyle: {
              cellBorderLineWidth: 2,
              cellBorderColor: "#1890ff",
            },

            // 悬停样式
            hoverStyle: {
              rowBgColor: "#e6f7ff",
            },
          },
        },
      });
    }
  },
  watch: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
